<template>
  <div>
    <button class="first" onclick="alert('some')">AboutView</button>
    <el-button @click="b()">Go{{ a }}</el-button>
    <el-input v-model="a"></el-input>
    <el-button :type="oneType">Suc</el-button>
    <!--    <el-button :type="types[0]">{{ types[0] }}</el-button>-->
    <!--    <el-button :type="types[1]">{{ types[1] }}</el-button>-->
    <el-button v-for="e in types" :key="e" :type="e">{{ e }}</el-button>
    <template v-for="(e, i) in types">
      <el-button :key="i" :type="e">{{ i }} </el-button>
    </template>
    <nav-child type="sss" title="yyy"></nav-child>
    <nav-child type="ddd" title="xxx"></nav-child>
    <nav-child :type="a"></nav-child>
    <el-button @click="send">axios发请求</el-button>
    <el-input v-model="changedName"></el-input>
    <el-button @click="modify">写入store</el-button>
  </div>
</template>
<script>
import NavChild from "@/components/NavChild";
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import New from './components/New.vue';
export default {
  name: "AboutView",
  components: {
    NavChild,
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      a: "zhangsan",
      oneType: "warning",
      types: ["primary", "info", "warning", "danger", "success", "some"],
      changedName: "",
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    modify() {
      /*
      *   mutations: {
    updateFirstName(state, payload) {
      state.firstName = payload;
    },
      },
      * */
      // this.$store.state.firstName = this.changedName;
      // this.$store.mutations.updateFirstName(this.changedName);
      this.$store.commit("updateFirstName", this.changedName);
    },
    sampleM() {},
    b() {
      this.a = this.a + "=";
    },
    send() {
      let request = {
        url: "http://localhost:9090/ceto/player/showSome",
        method: "get",
      };
      let promise = this.$axios(request);
      promise.then(
        (res) => {
          console.log(res);
        },
        () => {}
      );
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.first {
  border: 1px solid red;
  padding: 5px;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  &:hover {
    background: #42b983;
  }
}
//.first:hover {
//  background: #42b983;
//}
</style>
